<template>
    <div class="Rolesmanagement">
        <div class="rolestitle">
            <el-button type="primary" class="add" @click="addroles"><i class="el-icon-plus"></i>新增角色</el-button>
            <el-select v-model="value" placeholder="请输入角色名称" class="selection" @change="serch()">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    @change="serch(item.value)"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
         <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    prop="roalesname"
                    label="角色名称"
                    width="200">
                    </el-table-column>
                    <el-table-column
                    prop="Numbermembers"
                    label="成员数量"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="describes"
                    label="描述"
                    width="250">
                    </el-table-column>
                    <el-table-column
                    prop="updatetime"
                    label="更新时间"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="499">
                        <template slot-scope="scope">
                            <i class="el-icon-edit"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="edit(scope.row.Role_id)">{{ scope.row.adds }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="setup(scope.row.Role_id)">{{ scope.row.setup }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.Role_id)">{{ scope.row.del }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagecurren :totalpage="totalpage" :currentPage2="currentPage2" @send="getpage" @send-pagelimit="getpagelimit" :pagelimit="pagelimit"></Pagecurren>
        </div>
        <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="角色名称" :label-width="formLabelWidth" class="rolesName" prop='name'>
                    <el-input v-model="form.name" autocomplete="off" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="部门描述" :label-width="formLabelWidth" class="DepartmentDescription" >
                    <el-input v-model="form.DepartmentDescription" autocomplete="off" placeholder="请输入部门描述"></el-input>
                </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addrolesclose('form')">取 消</el-button>
                <el-button type="primary" @click="addrolesubmit('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagecurren from '../components/Pagecurren.vue'
export default {
    components:{
        Pagecurren
    },
    data(){
        return{
            value:'',
            options: [{
            value: '物业经理',
            label: '物业经理'
            }, {
            value: '销售经理',
            label: '销售经理'
            }, {
            value: '技术总监',
            label: '技术总监'
            }, {
            value: '业务经理',
            label: '业务经理'
            }, {
            value: '客服经理',
            label: '客服经理'
            },{
            value: '售后经理',
            label: '售后经理'
            }, {
            value: '行政经理',
            label: '行政经理'
            }, {
            value: '财务经理',
            label: '财务经理'
            }, {
            value: '人事经理',
            label: '人事经理'
            }, {
            value: '市场经理',
            label: '市场经理'
            }],
            // tableData:[
            //     {
            //         roalesname: '物业经理',
            //         Numbermembers:'30',
            //         describe:'暂无相关描述',
            //         updatetime:'2021-08-25 14:54',
            //         add:'添加人员',
            //         setup:'设置权限',
            //         del:'删除',
            //     }, 
            //     {
            //         roalesname: '物业经理',
            //         Numbermembers:'30',
            //         describe:'暂无相关描述',
            //         updatetime:'2021-08-25 14:54',
            //         add:'添加人员',
            //         setup:'设置权限',
            //         del:'删除',
            //     }, 
            //     {
            //         roalesname: '物业经理',
            //         Numbermembers:'30',
            //         describe:'暂无相关描述',
            //         updatetime:'2021-08-25 14:54',
            //         add:'添加人员',
            //         setup:'设置权限',
            //         del:'删除',
            //     }, 
            //     {
            //         roalesname: '物业经理',
            //         Numbermembers:'30',
            //         describe:'暂无相关描述',
            //         updatetime:'2021-08-25 14:54',
            //         add:'添加人员',
            //         setup:'设置权限',
            //         del:'删除',
            //     }, 
            // ],
            totalpage:300,
            currentPage2:1,
            pagelimit:10,
            tableData:[],
            datalists:[],
            dialogFormVisible: false,
            form: {
                name: '',
                DepartmentDescription:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            formLabelWidth: '120px'
        }
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
            },
        },
        pagelimit:{
            handler(val,oldval){
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        },
        datalists:{
            handler(val,oldval){
                val.forEach(item=>{
                    item.updatetime=this.moment(item.updatetime).format("YYYY-MM-DD HH:mm:ss")
                })
            }
        }
    },
    mounted(){
        this.$axios.get('http://127.0.0.1/roleslists',{
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            },
        }).then(res=>{
            this.datalists=res.data
            this.totalpage=res.data.length
            this.tableData=res.data.slice(0,10)
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        getpage(data){
            this.currentPage2=data
        },
        getpagelimit(data){
            this.pagelimit=data
        },
        addroles(){
            this.dialogFormVisible=true
        },
        addrolesubmit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$axios.post('http://127.0.0.1/roleslistsinsert',{
                        ...this.form
                    },{
                        headers: {
                            'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                            'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                        },
                    }).then(res=>{
                        this.datalists=res.data
                        this.totalpage=res.data.length
                        this.tableData=res.data.slice(0,10)
                        this.dialogFormVisible=false
                        this.$refs[formName].resetFields();
                        this.$message({
                            type: 'success',
                            message: '数据添加成功!'
                        });
                    }).catch(err=>{
                        console.log(err)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
            
        },
        addrolesclose(){
            this.dialogFormVisible=false
            this.$refs[formName].resetFields();
        },
        edit(i){
            console.log('添加人员',i)
            this.$router.push('/about/Staffmanagement')
        },
        setup(i){
            console.log('设置权限',i)
        },
        del(i){
            console.log('删除',i)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('http://127.0.0.1/roleslistsdel',{
                    id:i
                },{
                    headers: {
                        'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                        'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                    },
                }).then(res=>{
                    this.datalists=res.data
                    this.totalpage=res.data.length
                    this.tableData=res.data.slice(0,10)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(err=>{
                    console.log(err)
                })
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        serch(){
            this.$axios.post('http://127.0.0.1/roleslistsserch',{
                name:this.value
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('ticket')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                },
            }).then(res=>{
                this.datalists=res.data
                this.totalpage=res.data.length
                this.tableData=res.data.slice(0,10)
            }).catch(err=>{
                console.log(err)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .Rolesmanagement{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        .rolestitle{
            height: 50px;
            display: flex;
            align-items: center;
            .add{
                width: 100px;
                height: 35px;
                background-color: #0079fe;
                padding: 0;
                .el-icon-plus{
                    font-weight: 700;
                    margin-right: 5px;
                }
            }
            .add:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .selection,.inputname{
                width: 200px;
                margin-left: 10px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
        }
        ::v-deep .rolesName .el-form-item__content{
            width: 300px;
        }
        .datatable{
            margin-top: 10px;
            ::v-deep .has-gutter th{
                height: 45px !important;
                background-color: #f5f5f5;
                box-sizing: border-box;
                padding: 0 !important;
                font-size: 14px;
                color: #666666;
                font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                text-align: center;
            }
            ::v-deep .el-table__row td{
                height: 50px !important;
                padding: 0 !important;
                text-align: center;
            }
            ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                background-color: #f9f9f9;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(1){
                color: #0079fe !important;
                text-align: center;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(2){
                color: #0079fe !important;
                // text-align: center !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-child(4){
                color: #999 !important;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                // text-align: center;
                color: #0079fe;
                // cursor: pointer;
            }
            ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                cursor: pointer;
                text-decoration: underline !important;
                // color: #4a4a4a;
            }
            ::v-deep .el-table__row .el-table__cell{
                color: #666666;
                font-size: 12px;
            }
            
        }
    }
</style>